<!--
 * @Descripttion: 活动邀约列表
 * @version: V1.0
 * @Author: GW
 * @Date: 2021-09-18 09:13:09
 * @LastEditors: GW
 * @LastEditTime: 2021-11-03 17:37:57
-->
<template>
    <nly-content-wrapper class="activity content-warpper-2">
        <div class="content-header-2">
            <!--按钮-->
            <div class="btn-wrapper clearfix">
                <a-row class="text-center clearfix">
                    <a-col :xs="24" :sm="24" :md="24" :lg="16" :xl="12">

                        <!-- <a-col :xs="btnGrid.xs" :sm="btnGrid.sm" :md="btnGrid.md" :lg="btnGrid.lg" :xl="btnGrid.xl">
                            <div class="btns" @click="deleteFrom">
                                <a-icon class="btns-icon" type="delete" />
                                <div class="btns-text">删除</div>
                            </div>
                        </a-col> -->
                        <!-- <a-col :xs="btnGrid.xs" :sm="btnGrid.sm" :md="btnGrid.md" :lg="btnGrid.lg" :xl="btnGrid.xl">
                            <div class="btns" @click="search">
                                <a-icon class="btns-icon" type="file-search" />
                                <div class="btns-text">查询</div>
                            </div>
                        </a-col> -->
                        <a-col :xs="btnGrid.xs" :sm="btnGrid.sm" :md="btnGrid.md" :lg="btnGrid.lg" :xl="btnGrid.xl">
                            <div class="btns" @click="getList">
                                <a-icon class="btns-icon" type="file-sync" />
                                <div class="btns-text">刷新</div>
                            </div>
                        </a-col>
                    </a-col>
                </a-row>
            </div>
            <!--内容-->
            <section>
                <!-- 列表 -->
                <a-table class="invite-table" :loading="loading" :columns="columns" :components="components" :data-source="dataSource" :scroll="{ y: 500,x:100}" bordered :pagination="pagination" @change="onTableChange" :row-selection="{selectedRowKeys: selectedKeys, onChange: selectionChange}">
                    <div slot="filterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }" style="padding: 8px">
                        <a-input v-ant-ref="c => (searchInput = c)" :placeholder="`搜索${column.title}`" v-model="requestData[column.dataIndex]" style="width: 188px; margin-bottom: 8px; display: block;" @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])" @pressEnter="() => handleSearch(selectedKeys, confirm, column.dataIndex)" />
                        <a-button size="small" style="width: 90px;margin-right:8px;" @click="() => handleResetSearch(clearFilters,column.dataIndex)">
                            重置
                        </a-button>
                        <a-button type="primary" icon="search" size="small" style="width: 90px;" @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)">
                            搜索
                        </a-button>
                    </div>
                    <div slot="activityName" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }" style="padding: 8px">
                        <a-input v-ant-ref="c => (searchInput = c)" :placeholder="`搜索${column.title}`" v-model="requestData[column.dataIndex]" style="width: 188px; margin-bottom: 8px; display: block;" @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])" @pressEnter="() => handleSearch(selectedKeys, confirm, column.dataIndex)" />
                        <a-button size="small" style="width: 90px;margin-right:8px;" @click="() => handleResetSearch(clearFilters,column.dataIndex)">
                            重置
                        </a-button>
                        <a-button type="primary" icon="search" size="small" style="width: 90px;" @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)">
                            搜索
                        </a-button>
                    </div>
                    <div slot="name" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }" style="padding: 8px">
                        <a-input v-ant-ref="c => (searchInput = c)" :placeholder="`搜索${column.title}`" v-model="requestData[column.dataIndex]" style="width: 188px; margin-bottom: 8px; display: block;" @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])" @pressEnter="() => handleSearch(selectedKeys, confirm, column.dataIndex)" />
                        <a-button size="small" style="width: 90px;margin-right:8px;" @click="() => handleResetSearch(clearFilters,column.dataIndex)">
                            重置
                        </a-button>
                        <a-button type="primary" icon="search" size="small" style="width: 90px;" @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)">
                            搜索
                        </a-button>
                    </div>
                    <div slot="phone" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }" style="padding: 8px">
                        <a-input v-ant-ref="c => (searchInput = c)" :placeholder="`搜索${column.title}`" v-model="requestData[column.dataIndex]" style="width: 188px; margin-bottom: 8px; display: block;" @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])" @pressEnter="() => handleSearch(selectedKeys, confirm, column.dataIndex)" />
                        <a-button size="small" style="width: 90px;margin-right:8px;" @click="() => handleResetSearch(clearFilters,column.dataIndex)">
                            重置
                        </a-button>
                        <a-button type="primary" icon="search" size="small" style="width: 90px;" @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)">
                            搜索
                        </a-button>
                    </div>
                    <div slot="crmName" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }" style="padding: 8px">
                        <a-input v-ant-ref="c => (searchInput = c)" :placeholder="`搜索${column.title}`" v-model="requestData[column.dataIndex]" style="width: 188px; margin-bottom: 8px; display: block;" @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])" @pressEnter="() => handleSearch(selectedKeys, confirm, column.dataIndex)" />
                        <a-button size="small" style="width: 90px;margin-right:8px;" @click="() => handleResetSearch(clearFilters,column.dataIndex)">
                            重置
                        </a-button>
                        <a-button type="primary" icon="search" size="small" style="width: 90px;" @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)">
                            搜索
                        </a-button>
                    </div>
                    <div slot="shareUserName" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }" style="padding: 8px">
                        <a-input v-ant-ref="c => (searchInput = c)" :placeholder="`搜索${column.title}`" v-model="requestData[column.dataIndex]" style="width: 188px; margin-bottom: 8px; display: block;" @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])" @pressEnter="() => handleSearch(selectedKeys, confirm, column.dataIndex)" />
                        <a-button size="small" style="width: 90px;margin-right:8px;" @click="() => handleResetSearch(clearFilters,column.dataIndex)">
                            重置
                        </a-button>
                        <a-button type="primary" icon="search" size="small" style="width: 90px;" @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)">
                            搜索
                        </a-button>
                    </div>
                </a-table>
            </section>
        </div>
    </nly-content-wrapper>
</template>
<script>
import { mapState } from "vuex";

import { getFilesList, removeFrom } from '@/api/activity/activity'

export default {
    data () {
        return {
            //----------↓样式----------
            btnGrid: {
                xs: 2,
                sm: 2,
                md: 2,
                lg: 2,
                xl: 2
            },
            //----------↑样式----------
            columns: [{
                title: '姓名',
                dataIndex: 'name',
                scopedSlots: {
                    filterDropdown: 'name',
                    filterIcon: 'filterIcon',
                },
            }, {
                title: '手机',
                dataIndex: 'phone',
                scopedSlots: {
                    filterDropdown: 'phone',
                    filterIcon: 'filterIcon',
                },
            }, {
                title: '邮箱',
                dataIndex: 'email',
            }, {
                title: '公司名称',
                dataIndex: 'crmName',
                scopedSlots: {
                    filterDropdown: 'crmName',
                    filterIcon: 'filterIcon',
                },
            }, {
                title: '邀约表单名称',
                dataIndex: 'formName',
                scopedSlots: {
                    filterDropdown: 'filterDropdown',
                    filterIcon: 'filterIcon',
                },
            }, {
                title: '市场活动名称',
                dataIndex: 'activityName',
                scopedSlots: {
                    filterDropdown: 'activityName',
                    filterIcon: 'filterIcon',
                },
            },
            // {
            //     title: '状态',
            //     dataIndex: 'status',
            //     customRender: (text, record, index) => {
            //         return text == 1 ? '已邀约' : text == 0 ? '未邀约' : '';
            //     }
            // }, 
            {
                title: '地址',
                dataIndex: 'address',
            }, {
                title: '签到时间',
                dataIndex: 'signDate',
            }, {
                title: '邀约人',
                dataIndex: 'shareUserName',
                scopedSlots: {
                    filterDropdown: 'shareUserName',
                    filterIcon: 'filterIcon',
                },
            }, {
                title: '提交日期',
                dataIndex: 'createDate',
            }],
            dataSource: [],

            formName: null,          //表单名称
            formId: null,            //表单id

            selectedKeys: [],
            selectedRows: [],
            loading: false,

            requestData: {},//搜索的数据
        }
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.info,
            permissions: state => state.user.permissions,
        }),
    },
    created () {
        // 获取活动数据列表
        this.getList();
    },
    activated () {
        this.getList();
    },
    methods: {
        getList () {
            // 获取活动数据列表
            this.loading = true;
            let requestData = {
                current: 1,
                size: 20,
            }
            let searchData = Object.assign(this.requestData, requestData);
            getFilesList(searchData).then(response => {
                if (response.code === 200) {

                    this.dataSource = response.data.records;
                } else {
                    // this.$message.warning(response.message)
                }
                this.loading = false;
            }).catch(error => {
                this.loading = false;
            });
        },

        search () {
            //查询
        },
        handleChange (value) {
            console.log(`selected ${value}`);
        },
        handleBlur () {
            console.log('blur');
        },
        handleFocus () {
            console.log('focus');
        },
        filterOption (input, option) {
            return (
                option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
            );
        },
        selectionChange (key, row) {
            this.selectedKeys = key;
            this.selectedRows = row;
            this.formId = key[0];
        },

        deleteFrom () {
            if (this.selectedKeys.length != 1) {
                this.$message.warning('请选择一条数据');
                return
            }
            let that = this;
            //获取表单数据列表
            this.$confirm({
                title: '提示',
                content: '是否确认删除该表单数据',
                onOk () {
                    removeFrom({ formId: that.selectedKeys[0] }).then(res => {
                        if (res.code === 200) {
                            that.$message.success('删除表单数据成功');
                            that.getList();
                            that.selectedKeys = [];
                            that.selectedRows = [];
                        }
                    })
                },
                onCancel () { },
            })
        },
        handleSearch (selectedKeys, confirm, dataIndex) {
            //搜索
            console.log(selectedKeys, confirm, dataIndex)
            confirm();
            // this.searchText = selectedKeys[0];
            // this.searchedColumn = dataIndex;
            this.requestData[dataIndex] = selectedKeys[0];
            console.log(this.requestData)
            this.getList();
        },
        handleResetSearch (clearFilters, code) {
            console.log(clearFilters, code)
            //重置
            clearFilters();
            this.requestData[code] = null;
            this.getList();
        },
    },
}
</script>

<style lang="less">
    @import '~@/style/crm.less';
    .invite-table {
        margin: 10px 10px 0;
        .shart-class {
            cursor: pointer;
            color: #007bff;
        }
    }
    .view-filter {
        // filter: blur(0.8px);
        // -webkit-filter: blur(0.8px);
        // -moz-filter: blur(0.8px);
        // -ms-filter: blur(0.8px);
        // -o-filter: blur(0.8px);
        opacity: 0.6;
    }
    .sortable-chosen,
    .sortable-ghose {
        opacity: 1 !important;
    }

    .share-modal-box {
        text-align: center;
        img {
            margin: 0 auto;
        }
        .btn {
            margin-top: 10px;
        }
    }
</style>
